<template>
  <div class="wrapper">
    <Header :title="'编辑资料'" />
    <div class="content-wrapper">
      <div class="content-container">
        <div class="avatar-container">
          <Avatar :avatar="myInfoForm.avatar" :asize="'big'" />
          <div class="avatar-tip">点击切换</div>
        </div>
        <div class="form-wrapper">
          <el-form :inline="true" :label-position="'left'" :style="{width:'680px',margin:'0 auto'}" >
            <!-- 第一行 用户名及生日 -->
            <el-row>
              <el-col>
            <el-form-item label="用户名: ">
              <el-input
                placeholder=""
                size="normal"
                clearable
                v-model="myInfoForm.account"
                @change=""
              ></el-input>
            </el-form-item>
            <el-form-item label="生日: ">
              <el-date-picker
                type="date"
                placeholder="请选择日期"
                v-model="myInfoForm.moreBackup.birthDate"
                size="default"
              />
            </el-form-item>
              </el-col>
            </el-row>
            <!-- 性别 城市 -->
            <el-row>
              <el-col>
                <el-form-item label="性别: ">
                  <el-radio-group size="large">
                    <el-radio-button label="男" />
                    <el-radio-button label="女" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="城市: ">
                  <el-select placeholder="请选择">
                    <el-option
                      v-for="item in ['北京', '上海', '广州']"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                      <span>{{ item }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 成长等级 技能水平 -->
            <el-row>
              <el-col>
                <el-form-item label="成长等级: ">
                  <span>{{myInfoForm.level}}</span>
                </el-form-item>
                <el-form-item label="技能水平: ">
                 <el-select placeholder="请选择">
                    <el-option
                      v-for="item in ['零基础小白', '一般选手', '高级选手']"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                      <span>{{ item }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 兴趣技能 -->
            <el-row>
              <el-col>
                <el-form-item label="兴趣技能: ">
                  <div class="tags-list-wrapper">
                    <div v-for="item in selectedAvocationList" :key="item.id"  >
                      <el-tag>{{item.name}}</el-tag>
                    </div>
                  </div>
                  <div @click="handleDialog" >选择兴趣</div>
                  
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
  <AvocationSelector :dialogVisible="dialogVisible" @handleDialog="handleDialog" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "myInfo",
});
</script>

<script setup lang="ts">
import Header from "../components/header.vue";
import Avatar from "../components/avatar.vue";

import { useMineStore } from "@/store/mine/mine";
import { ref, onMounted } from "vue";
import { reactive } from "vue";
import { storeToRefs } from "pinia";
const mineStore = useMineStore();
const {selectedAvocationList} =storeToRefs(mineStore)
type MyInfoType = {
    avatar: string|undefined,
  account:string|undefined,
  id: string|undefined,
  mobile: string|undefined,
  level:number|undefined,
  moreBackup: {
    sex: '',
    skillLevel: 1,
    skillLevelName: '零基础，上硅谷',
    city: '',
    cityName: '',
    birthDate: '',
    
    
  }
}
const myInfoForm = reactive({
  avatar: '',
  account:'张小飞',
  id: '',
  mobile: '',
  level:1,
  moreBackup: {
    sex: '',
    skillLevel: 1,
    skillLevelName: '零基础，上硅谷',
    city: '',
    cityName: '',
    birthDate: '',
    
    
  }
})
const { data } = storeToRefs(mineStore);
console.log('data',data)
myInfoForm.avatar=data.value?.avatar as string
myInfoForm.account=data.value?.account as string
myInfoForm.id=data.value?.id as string
myInfoForm.level = data.value?.level as number
myInfoForm.moreBackup.birthDate = data.value?.moreBackup.birthDate as unknown as string



// 兴趣选择框 
const dialogVisible = ref(false)
const handleDialog = () => {
    dialogVisible.value = !dialogVisible.value
}
// 获取兴趣选择 的数据

</script>

<style lang="less" scoped>
.wrapper {
  .content-wrapper {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    margin-top: 10px;
    .content-wrapper {
      .content-container {
        .avatar-container {
          .avatar-tip {
            display: block;
          }
        }
        .form-wrapper {
          .el-form {
            width: 680px;
          }
        }
      }
    }
  }
}
</style>
